<template>
    <div class="prize-data">
        <p class="prize-title">奖品数据</p>
        <el-table :data="prizeData" style="width: 100%">
            <el-table-column prop="name" label="奖品等级" width="180">
                <template #default="{ row }">
                    <div>{{ row.step_name || '汇总' }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="reward_info" label="奖品信息" width="180">
                <template #default="{ row }">
                    <div v-if="row.reward_image" class="prize-info">
                        <UserInfo
                            :avatar-shape="'square'"
                            :name="row.reward_title"
                            :limit="7"
                            :avatar="row.reward_image"></UserInfo>
                    </div>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column prop="total_stock" label="奖品数量" />
            <el-table-column prop="lock_stock" label="已锁定库存数量" />
            <el-table-column prop="surplus_stock" label="剩余库存数量" />
            <el-table-column prop="receive_stock" label="已领取数量" />
            <el-table-column prop="consume_stock" label="已核销数量" />
        </el-table>
        <p class="prize-title record">中奖记录</p>
        <PrizeTable @refresh="ininPrizeData" />
    </div>
</template>

<script setup lang="tsx">
import { ref, onMounted } from 'vue';

// 引入中奖表格
import PrizeTable from './PrizeTable.vue';
// 用户信息组件
import UserInfo from './UserInfo.vue';

import { rewardList } from '@/api/smartMarketing/drainage/groupFission';

import { useRoute } from 'vue-router';

const route = useRoute();

// 获取路由参数
const { id } = route.query;

// 奖品数据
const prizeData = ref<any>([]);

const ininPrizeData = () => {
    rewardList({ id }).then((resp: any) => {
        prizeData.value = resp;
    });
};
onMounted(() => {
    ininPrizeData();
});
</script>

<style lang="scss" scoped>
:deep .el-table__header-wrapper,
.el-table__fixed,
.el-table__fixed-right {
    .el-table__header {
        thead {
            tr {
                th {
                    background-color: #f9f9f9;
                }
            }
        }
    }
}
.prize-data {
    .prize-title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #33302d;
        line-height: 16px;
        margin: 24px 0 16px;
        &::before {
            content: '';
            display: inline-block;
            width: 3px;
            height: 16px;
            background: #ff6b00;
            border-radius: 2px;
            margin-right: 6px;
        }
    }
    .record {
        margin-bottom: -8px;
    }
    .prize-info {
        width: 100%;
        height: 100%;
        display: flex;
        align-content: center;
        span {
            margin-left: 8px;
        }
    }
}
:deep(.el-avatar > img) {
    width: 100%;
    background: #fff;
}
</style>
